<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <title>滑块 - layui</title>

    <link rel="stylesheet" href="./assets/dist/css/layui.css" />
    <style>
      body {
        padding: 100px 0;
      }
    </style>
  </head>
  <body>
    <div class="layui-container">
      <div id="slideTest1"></div>
      <br />
      <div
        id="slideTest2"
        style="margin: 45px 30px; display: inline-block"
      ></div>
    </div>

    <script src="./assets/dist/layui.js"></script>
    <script>
      layui.use('slider', () => {
        var slider = layui.slider;

        var sliderInst = slider.render({
          elem: '#slideTest1',
          //,type: 'vertical'
          //,min: -20 //最小值
          //,max: 20 //最大值
          //,value: 11 //[40, 60] //初始值
          //,step: 1 //间隔值
          //,showstep: true //间隔点
          tips: true, //开启提示文本
          tipsAlways: true, //开启提示文本始终显示
          input: true, //输入框
          //,range: true //范围选择
          //,theme: '#FF5722'
          change: (value) => {
            // 选中值发生改变的回调
            console.log('change', value);
          },
          done: (value) => {
            // 值完成选中的回调 -- v2.8.0 新增
            console.log('done', value);
          },
          setTips: (value) => value + '%',
          //,setTips: function(value){ //自定义提示文本
          //return '离世界末日还有 ' + value + ' 天';
          //}
          //,height: '300' //配合 type:'vertical' 参数使用，默认200px
          //,disabled: true //禁用滑块
          //,theme: '#c00' //主题色
        });

        //sliderInst.setValue(30);

        slider.render({
          elem: '#slideTest2',
          type: 'vertical',
        });
      });
    </script>
  </body>
</html>
